<!--资金明细-->
<template>
  <div>
    <div class="head">
      <div class="head_left" @click="bafanck()">
        <img src="../assets/back.png" class="back_img" alt>
      </div>
      <div class="head_in" @click="binding()">
        <span class="head_title">{{capital}}</span>
        <img class="bott_img" src="../assets/bott_img.png" alt>
      </div>
      <div class="head_left"></div>
    </div>
    <div class="tanchu" v-if="isDetailed">
      <div class="tanchu_xuanz">
        <div class="detaone" @click="whole1()">我的持仓</div>
        <div class="detaone" @click="whole2()">历史账单查询</div>
        <div class="detaone" @click="whole3()">条件单</div>
        <div class="detaone" @click="whole4()">权益明细</div>
      </div>
      <div class="tanchu_mask" @click="colse()"></div>
    </div>
    <div style="width:100%;height:100%;" v-if="isposition">
      <position style="margin-top:1.5rem;"></position>
    </div>
    <div style="width:100%;height:100%;" v-if="ishistory">
      <!-- <settled></settled> -->
    </div>
    <div style="width:100%;height:100%;" v-if="istiaojian">
      <condition></condition>
    </div>
    <div style="width:100%;height:100%;" v-if="isquanyi">
      <income></income>
    </div>
  </div>
</template>

<script>
import position from "@/oldvue/position.vue";
// import settled from "@/components/commapp/settled";
import condition from "@/oldvue/condition";
import income from "@/oldvue/income";
export default {
  data() {
    return {
      capital: "我的持仓",
      isDetailed: false,
      isposition: true,
      ishistory: false,
      istiaojian: false,
      isquanyi: false
    };
  },
  components: { position, condition,income },
  methods: {
    bafanck() {
      this.$router.go(-1); //返回上一层
    },
    binding() {
      var that = this;
      that.isDetailed = !that.isDetailed;
    },
    colse() {
      var that = this;
      that.isDetailed = false;
    },
    whole1() {
      var that = this;
      that.capital = "我的持仓";
      that.isDetailed = false;
      this.isposition = true;
      this.ishistory = false;
      this.istiaojian = false;
      this.isquanyi = false;
    },
    whole2() {
      var that = this;
      that.capital = "历史账单查询";
      that.isDetailed = false;
      this.ishistory = true;
      this.isposition = false;
      this.istiaojian = false;
      this.isquanyi = false;
    },
    whole3() {
      var that = this;
      that.capital = "条件单";
      that.isDetailed = false;
      this.istiaojian = true;
      this.isposition = false;
      this.ishistory = false;
      this.isquanyi = false;
    },
    whole4() {
      var that = this;
      that.capital = "权益明细";
      that.isDetailed = false;
      this.isquanyi = true;
      this.isposition = false;
      this.ishistory = false;
      this.istiaojian = false;
    }
  }
};
</script>
<style scoped>
.head {
  width: 750px;
  height: 100px;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head_left {
  width: 120px;
  height: 100px;
  display: flex;
  justify-content: flex-start;
  padding-left: 30px;
  box-sizing: border-box;
  align-items: center;
}
.back_img {
  width: 40px;
  height: 40px;
}
.head_in {
  width: 510px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bott_img {
  margin-left: 10px;
  width: 30px;
  height: 30px;
}
.head_title {
  font-size: 34px;
  color: #b3262c;
  margin-left: 30px;
}
.mintpopup4 {
  margin-top: 100px;
  height: 100px;
}
.tanchu {
  width: 750px;
  position: fixed;
  top: 100px;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #0000003d;
}
.tanchu_xuanz {
  width: 750px;
  height: 340px;
  background-color: #ffffff;
}
.tanchu_mask {
  width: 750px;
  height: 70%;
}
.detaone {
  width: 750px;
  height: 1.12rem;
  border-bottom: #e1e1e1 solid 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  color: #313131;
}
</style>
